<template>
    <div ref="myChart" style="width:100%;height:100%" id="myChart"></div>
</template>
<script>
    export default {
        name: 'pie',
        props: {
            percent: {
                type: Number,
                default: 0
            },
            color: {
                type: String,
            },
            name: {
              type: String,
            }
        },
        data: () => ({}),
        mounted() {
         setTimeout( () => {
           this.drawChart();
         }, 1000)
        },
        methods: {
            drawChart() {
              const {myChart} = this.$refs;
              if (myChart) {
                const thisChart = this.$echarts.init(myChart);
                const option = {
                  legend: {
                    orient: 'vertical',
                    right: -0,
                    bottom:30,
                    textStyle: {
                      color: '#069DFD',
                      fontSize: 12,
                      fontWeight: 100,
                      itemWidth: 100,
                    },
                  },
                  series: [{
                    type: 'pie',
                    radius: ['65%', '80%'],
                    center: ['38%', '50%'], //图的位置，距离左跟上的位置
                    avoidLabelOverlap: false,
                    data: [
                      {
                        name: this.name,
                        value: this.percent,
                        itemStyle: {
                          color: this.color,
                        },
                        selected:true,
                        label: {
                          show: true,
                          position: 'center',
                          fontSize: '14',
                          color: '#4EB2F2',
                          formatter: "{d}%",
                        },
                      },
                      {
                        value: 100 - this.percent,
                        itemStyle: {
                          color: 'rgba(12, 51, 109, 0.5)',
                        },
                      },
                    ],
                    labelLine: {
                      show: false
                    },
                  }],
                };
                thisChart.setOption(option);
                window.addEventListener('resize', () => {
                  thisChart.resize();
                })
              }
            },
        },
    };
</script>
<style lang="less" scoped>
</style>
